<template>
	<div class="goods-item">
		<div class="goods-images">
			<img class="goods-img" v-lazy="item.pic" />
		</div>
		<div class="goods-content">
			<h2 class="goods-name">
				<svg-icon v-if="item.shoptype == 1" class="icon" iconName="tm"></svg-icon>
				<svg-icon v-if="item.shoptype == 0" class="icon" iconName="tb"></svg-icon>
				<span>{{ item.title }}</span>
			</h2>
			<div class="goods-info">
				<div class="discount">
					<div class="coupon" v-if="item.couponMoney && item.couponMoney != 0">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						{{ item.couponMoney }}元券
					</div>
					<div class="subsidy">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						补贴¥{{ item.mdMoney | Fixed(2) }}
					</div>
					<div class="subsidy" v-if="item.tljMoney && item.tljMoney != 0">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						淘礼金¥{{ item.tljMoney | Fixed(2) }}
					</div>
				</div>
			</div>
			<div class="base-flex price-box" :style="{ 'margin-top': item.timeStatus == 0 ? '40px' : '' }">
				<div>
					<div class="goods-price">
						<div class="deal">
							到手价<b>¥</b
							><span class="span">{{
								(item.endPrice - Number(item.mdMoney ? item.mdMoney : 0) - Number(item.tljMoney ? item.tljMoney : 0)) | Fixed(2)
							}}</span>
						</div>
						<p class="p">{{ item.price | Fixed(2) }}</p>
					</div>
				</div>
				<div class="price-btn">
					<div class="buy" :class="[{ disabled: item.hasBuy === 0 || item.timeStatus == 2 }]">
						<div class="copy-tkl" @click="over" v-if="item.hasBuy === 0 || item.timeStatus == 2">
							<span>
								已过期
							</span>
						</div>
						<div class="copy-tkl" @click="copyTkl" v-if="item.hasBuy === 1 && item.timeStatus == 1">
							<span>
								复制淘口令
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--复制成功-->
		<van-popup class="copy-popup" get-container="body" v-model="visible" closeable @close="close">
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
				<p class="time">
					优惠券到期时间<br />
					<van-count-down :time="couponEndtime" format="DD 天 HH 时 mm 分 ss 秒" />
				</p>
			</div>
		</van-popup>
	</div>
</template>

<script>
import moment from 'moment';
import { Popup } from 'vant';
export default {
	name: 'GoodsItem-list',
	components: {
		'van-popup': Popup
	},
	data() {
		return {
			visible: false,
			couponEndtime: 0
		};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	created() {
		this.couponEndtime = (parseInt(this.item.couponEndtime) - parseInt(moment().format('X'))) * 1000;
	},
	methods: {
		over() {
			this.$emit('over');
		},
		close() {},
		copyTkl() {
			window.BestpayHtml5.System.setClipboardContent(
				{
					data: this.item.tkl
				},
				() => {
					this.visible = true;
					setTimeout(() => {
						this.visible = false;
						// 如果是已购买则直接复制
						// if (item.hasBuy == 1) {
						// } else {
						// 	this.close();
						// }
					}, 2000);
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);
	height: 294px;
	border-radius: 16px;
	padding: 28px 22px 22px 20px;
	.goods-images {
		width: 240px;
		height: 240px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		@include flexBox(center, center);
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.goods-content {
		height: 260px;
		flex: 1;
		margin-left: 15px;
		.goods-name {
			font-size: 28px;
			line-height: 36px;
			color: $text-black;
			@include ellipsis(2);
			margin-bottom: 12px;
			.icon {
				font-size: 28px;
			}
			span {
				font-size: 28px;
			}
		}
		.goods-info {
			margin-bottom: 30px;
			@include flexBox(space-between, center);
			.discount {
				height: 28px;
				display: flex;
				.coupon {
					line-height: 28px;
					padding: 0 18px;
					background: $main-color;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: $color-white;
					position: relative;
				}
				.subsidy {
					line-height: 28px;
					padding: 0 18px;
					background: #ffeed1;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: #925114;
					position: relative;
					margin-left: 20px;
				}
				.circle-left {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					left: -6px;
				}
				.circle-right {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					right: -6px;
				}
			}
			.sale {
				font-size: 20px;
				color: $text-grey;
			}
		}
		.price-box {
			@include flexBox(space-between, center);
			margin-top: 70px;
		}
		.goods-price {
			color: #f70114;
			font-size: 22px;
			@include flexBox(null, center);

			.deal {
				.span {
					font-size: 30px;
				}
			}
			.p {
				margin-top: 8px;
				color: #c3c3c3;
				text-decoration: line-through;
				margin-left: 15px;
			}
		}
	}
}

.buy {
	height: 68px;
	color: $color-white;
	font-size: 20px;
	width: 144px;
	margin-left: 25px;
	position: relative;
	.copy-tkl {
		height: 34px;
		line-height: 34px;
		font-size: 20px;

		display: block;
		color: #fff;
		height: 50px;
		line-height: 50px;
		background: linear-gradient(270deg, rgba(255, 72, 74, 1) 0%, rgba(255, 80, 73, 1) 100%);
		border-radius: 28px;
		text-align: center;
		@include flexBox(center, center);

		.icon {
			font-size: 22px;
			position: relative;
			top: -1px;
			color: #fff;
		}
		span {
			letter-spacing: 0.5px;
		}
	}
	&.disabled {
		border-color: #ebebeb;
		.copy-tkl {
			background: #ebebeb;
			color: #7b7b7b;
		}
	}
}

@supports (bottom: env(safe-area-inset-bottom)) {
	.back-home {
		margin-bottom: env(safe-area-inset-bottom);
	}
}

.copy-popup {
	width: 452px;
	height: 428px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
		.time,
		.van-count-down {
			font-size: 24px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
		}
	}
}
</style>
